{include file='public/header'}
<div class="container">
    <div class="row">
        <div class="col-lg-8 blog-list">
            <h1 class="text-center">{$article.blog_title}</h1>
            <div class="m-p-10"></div>
            <div class="row text-center">
                <div class="col-lg-3">
                    <span class="glyphicon glyphicon-user"></span>{$article.blog_author}
                </div>
                <div class="col-lg-3">
                    <span class="glyphicon glyphicon-calendar"></span>{$article.create_time}
                </div>
                <div class="col-lg-3">
                    <span class="glyphicon glyphicon-th-list"></span>&nbsp;{$cat.cat_name}
                </div>
                <div class="col-lg-3">
                    <span class="glyphicon glyphicon-tags"></span>&nbsp;{$tag1.tname}
                </div>
            </div>
            <div class="m-p-10"></div>
            <div class="row pull-left">
                <div class="col-lg-12">
                    {$article.blog_content}
                </div>
            </div>
        </div>
        {include file='public/right'}
        <form action="{:url('index/article/commentadd')}" method="post">
            <div class="col-lg-8 col-xs-12 blog-list">
                <div>
                    <div class="m-p-10"></div>
                    <div id="warning"></div>
                    <input type="hidden" name="art_id" id="art_id" value="{$article.id}" >
                    <input type="hidden" name="user_id" id="user_id" value="{$user_message.idstr}">
                    <input type="hidden" id="screen_name" value="{$user_message.screen_name}">
                    <input type="hidden" id="profile_image_url" value="{$user_message.profile_image_url}">
                    <textarea name="comment" id="comment" cols="104" rows="3" style="resize:none" class="form-control"></textarea>
                    <div class="m-p-10"></div>
                    <input type="button" name="ok" id="ok" class="btn btn-primary pull-right" value="评论">
                </div>
                <div style="margin-top:59px">
                    最新评论
                    <hr>
                </div>
                <div id="commentarea" class="col-lg-12 row">
                    {foreach name="comment" item="vo"}
                        <div class='col-lg-12 row'>
                            <div class='col-lg-2'>
                                <img src='/thinkphp-practice/public/umeditor/php/userimage/8bc0d042jw8enuic2i8plj20k00k0gm7.jpg' style='width: 60px;height: 60px;'>
                            </div>
                            <p style='overflow: hidden'>{$vo->screen_name}：{$vo.content}</p>
                            <p style='line-height: 30px'>{$vo.create_time}</p>
                        </div>
                        <div class='row'>
                            <div class='col-lg-12' style='margin-bottom: 10px;margin-top: 10px;'>
                                <div style='border-bottom: 1px solid #E6EAED'></div>
                            </div>
                        </div>
                    {/foreach}
                </div>
            </div>
        </form>
        
    </div>
</div>
<script>
    $(document).ready(function(){
        $("#ok").click(function(){
            if (!$("#comment").val()){
                var warning = "<div class='alert alert-warning alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>评论内容不能为空。</div>";
                $('#warning').html(warning);
            }else {
                $('#warning').html("");
                var content = $('#comment').val();
                $('#comment').val("");
                var art_id = $('#art_id').val();
                var user_id = $('#user_id').val();
                var screen_name = $('#screen_name').val();
                var profile_image_url = $('#profile_image_url').val();
                $.ajax({
                    type:'post',
                    url:"{:url('index/article/ajaxReturn')}",
                    data:{
                        art_id: art_id,
                        comment: content,
                        user_id: user_id,
                        screen_name: screen_name,
                        profile_image_url:profile_image_url
                    },
                    datatype:'json',
                    success:function(msg){
                        var dataObj=eval("("+msg+")");
                        var warning = "<div class='alert alert-success alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>"+dataObj.info+"。</div>";
                        $('#warning').html(warning);
                        var div = "<div class='col-lg-12 row'>"
                                        +"<div class='col-lg-2'><img src='"+dataObj.profile_image_url+"' style='width: 60px;height: 60px;'></div>"
                                        +"<p style='overflow: hidden'>"+dataObj.screen_name+"："+dataObj.content+"</p>"+
                                        "<p style='line-height: 30px'>"+dataObj.date+"</p>"+
                                  "</div><div class='row'><div class='col-lg-12' style='margin-bottom: 10px;margin-top: 10px;'><div style='border-bottom: 1px solid #E6EAED'></div></div></div>";
                        $('#commentarea').append(div);
                    },
                    error:function(msg){
                        var dataObj=eval("("+msg+")");
                        alert(dataObj.info);
                    }

                });

            }
        });


        var user_id = $('#user_id').val();
        if(user_id==''){
            $('#comment').attr('disabled','disabled');
            $('#comment').html("请登录后再评论");
            $('#ok').attr('disabled','disabled');
        }
    });
</script>
{include file='public/footer'}